<template>
	<el-card>
		<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item>
				<el-input v-model="state.queryForm.groupName" placeholder="请输入名称" clearable style="width: 120px"></el-input>
			</el-form-item>
			<el-form-item>
				<el-select v-model="state.queryForm.type" placeholder="请选择类型" clearable style="width: 120px">
					<el-option v-for="item in TEMPLATE_GROUP_TYPES" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button @click="getDataList()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
			</el-form-item>
			<el-form-item class="import-button-wrapper">
				<template-group-import ref="templateGroupImportRef" @refresh-data-list="getDataList"></template-group-import>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="exportHandle()">导出</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="danger" @click="deleteBatchHandle()">删除</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%" @selection-change="selectionChangeHandle">
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column type="index" label="序号" header-align="center" align="center" width="60"></el-table-column>
			<el-table-column prop="groupName" label="名称" show-overflow-tooltip header-align="center" align="center"></el-table-column>
			<el-table-column prop="type" label="类型" header-align="center" align="center" :formatter="formatType"></el-table-column>
			<el-table-column prop="groupDesc" label="描述" show-overflow-tooltip header-align="center" align="center"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" header-align="center" align="center"></el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="230">
				<template #default="scope">
					<el-button type="primary" link @click="handlerTemplate(scope.row.id)">模板配置</el-button>
					<el-button type="primary" link @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
					<el-button type="primary" link @click="copyTemplateGroupHandle(scope.row.id)">复制</el-button>
					<el-button type="primary" link @click="deleteBatchHandle(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update>

		<!-- 弹窗，复制模板组 -->
		<copy-template-group ref="copyTemplateGroupRef" @refresh-data-list="getDataList"></copy-template-group>
	</el-card>

	<el-dialog v-model="dialogVisible" title="模板配置" width="75%">
		<!-- 添加key属性强制重新渲染组件 -->
		<template-index ref="templateIndexRef" :key="currentGroupId" :template-group-id="currentGroupId" @close="handleDialogClose" />
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import { useCrud } from '@/hooks'
import AddOrUpdate from './add-or-update.vue'
import TemplateIndex from '../template/index.vue'
import CopyTemplateGroup from './copy-template-group.vue'
import TemplateGroupImport from './template-group-import.vue'
import { exportTemplateGroupApi } from '@/api/template'
import { ElMessage } from 'element-plus'
import { TEMPLATE_GROUP_TYPES } from '@/constant/enum'

const state: IHooksOptions = reactive({
	dataListUrl: '/gen/template-group/list',
	deleteUrl: '/gen/template-group/delete',
	isPage: false,
	queryForm: {
		groupName: '',
		type: null
	}
})
const dialogVisible = ref(false)
const currentGroupId = ref(0) // 新增：存储当前操作的组ID
const templateIndexRef = ref()
const copyTemplateGroupRef = ref()
const templateGroupImportRef = ref()

const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
	currentGroupId.value = id || 0 // 新增：同步currentGroupId的值
	addOrUpdateRef.value.init(id)
}

const handlerTemplate = (id: number) => {
	dialogVisible.value = true
	currentGroupId.value = id
	templateIndexRef.value.getDataList()
}

const handleDialogClose = () => {
	dialogVisible.value = false
}

const copyTemplateGroupHandle = (id: number) => {
	copyTemplateGroupRef.value.init(id)
}

const { getDataList, selectionChangeHandle, deleteBatchHandle } = useCrud(state)

const formatType = (row: any) => {
	return TEMPLATE_GROUP_TYPES.find(item => item.value === row.type)?.label
}

const exportHandle = () => {
	const idList = state.dataListSelections ? state.dataListSelections : []
	if (idList.length === 0) {
		ElMessage.warning('请选择导出的模板组')
		return
	}
	exportTemplateGroupApi(idList)
}
</script>

<style>
.import-button-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
</style>
